<template>
  <div class="content">
    <div class="header">
      <div class="row">
        <span>品牌：</span>
        <span class="brands" :class="{on: filterBrand == item}" v-for="(item,index) in brand" :key="index" @click="handelBrand(item)">{{item}}</span>
      </div>
      <div class="row">
        <span>颜色：</span>
        <span class="brands" :class="{on: filterColor == item}" v-for="(item,index) in colors" :key="index" @click="handelColor(item)">{{item}}</span>
      </div>
      <div class="row" style="margin-bottom:0;">
        <span>排序：</span>
        <span class="brands" :class="{on: order == ''}" @click="handelOrder('')">默认</span>
        <span class="brands" :class="{on: order == 'sales'}" @click="handelOrder('sales')">
          销量
          <template v-if="order == 'sales'">↓</template>  
        </span>
        <span class="brands" :class="{on: order.indexOf('cost') > -1}" @click="handelOrderCost">
          价格
          <template v-if="order == 'cost-asc'">↑</template>
          <template v-if="order == 'cost-desc'">↓</template>
        </span>
      </div>
    </div>
    <div class="product-list">
      <div class="list-item" v-for="item in filteredAndOrderedList" :key="item.id">
        <div class="item-box">
          <div class="img-box">
            <img :src="item.image"/>
          </div>
          <h4 class="title">{{item.name}}</h4>
          <div class="color-div" :class="colorClass(item.color)"></div>
          <div class="cost">￥{{item.cost}}</div>
          <div class="add-cart" @click="addCart(item)">加入购物车</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//import product from './productData'
export default {
  data(){
    return{
      filterBrand: '',
      filterColor: '',
      order: '',
    }
  },
  methods :{
    addCart(item){
      this.$store.commit('addCart', item.id);
      console.log('cart',this.$store.state.cart.cartList);
    },
    colorClass(color){
      if(color === '白色') return 'whiteBg';
      if(color === '红色') return 'redBg';
      if(color === '金色') return 'yellowBg';
      if(color === '蓝色') return 'blueBg';
    },
    handelBrand(brand){
      if(this.filterBrand === brand){
        this.filterBrand = '';//取消筛选
      } else {
        this.filterBrand = brand;
      }
    },
    handelColor(color){
       if(this.filterColor === color){
        this.filterColor = '';//取消筛选
      } else {
        this.filterColor = color;
      }
    },
    handelOrder(order){
      if(order === ""){
        this.order = '';
      } else if(order === 'sales'){
        this.order = order;
      } 
    },
    handelOrderCost(){
      if(this.order === 'cost-asc'){
        this.order = 'cost-desc';
      } else {
        this.order = 'cost-asc';
      }
    }
  },
  mounted(){
    //获取产品数据
    this.$store.dispatch('getProductList');
    //console.log('prod',product);
  },
  computed: {
    list(){
      return this.$store.state.cart.productList;
    },
    brand(){
      return this.$store.getters.brands;
    },
    colors(){
      return this.$store.getters.colors;
    },
    filteredAndOrderedList(){
      let list = [...this.list];
      if(this.filterBrand){
        list = list.filter(item => item.brand === this.filterBrand);
      }
      if(this.filterColor){
        list = list.filter(item => item.color === this.filterColor);
      }
      console.log('order',this.order)
      if(this.order){
        if(this.order == 'sales'){
          list = list.sort((a,b) => b.sales - a.sales);
        } else if(this.order == 'cost-desc'){
          list = list.sort((a,b) => b.cost - a.cost);
        } else if(this.order == 'cost-asc'){
          list = list.sort((a,b) => a.cost - b.cost);
        }
      }
      return list;
    }
  }
}
</script>

<style scoped>
.add-cart{
  display: none;
  padding: 4px 8px;
  background: #2d8cf0;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
}
.on{
  background: #f2352e;
  border: 1px solid #f2352e;
  color: #fff;
}
.brands{
  cursor: pointer;
  display: inline-block;
  border: 1px solid #e9eaec;
  border-radius: 4px;
  margin-right: 6px;
  padding: 2px 6px;
  margin-bottom: 16px;
}
.order {
  margin-bottom: 0;
}
.row{
  text-align: left;
}
.content{
  background-color: #f8f8f9;
}
.header{
  background: #fff;
  border-radius: 6px;
  margin: 16px;
  padding: 16px;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.product-list{
  background-color: #f8f8f9;
  overflow: hidden;
}
.product-list .list-item{
  padding: 16px;
  width: 25%;
  float: left;
  background-color: #f8f8f9;
}
.list-item .item-box{
  border:1px solid #dddee1;
  border-radius: 6px;
  padding: 16px;
  background-color: #fff;
  position: relative;
}
.item-box:hover .add-cart{
  display: inline-block;
}
.item-box .whiteBg{
  background-color: #fff;
}
.item-box .redBg{
  background-color: rgb(242, 53, 46);
}
.item-box .yellogBg{
  background-color: rgb(218, 194, 114);
}
.item-box .blueBg{
  background-color: rgb(35, 52, 114);
}
.item-box .cost{
  color: #de4037;
  margin-top: 6px;
}
.list-item .item-box .img-box{
  width: 100%;
  height:0; 
	padding-bottom:100%;
	overflow:hidden;
  margin:0;
  position: relative;
  text-align: left;
}
.item-box .title{
  white-space: nowrap;  
	overflow: hidden;  
	text-overflow: ellipsis;
  color: #222;
}
.item-box .color-div{
  width: 16px;
  height: 16px;
  border: 1px solid #dddee1;
  border-radius: 50%;
  margin: 6px auto;
}
.list-item .item-box .img-box img{
  width:100%;
  height:100%;
  position:absolute;
}
</style>

